<template>
  <div class="plan">
    <div class="cunsustitle">事件分类统计明细</div>
    <div class="cunsus">
      <div class="navtitle">
        <p
          :class="selectType == 1 ? 'querytitle' : ''"
          @click="changeselectType(1)"
        >
          区域统计
        </p>
        <p
          :class="selectType == 2 ? 'querytitle' : ''"
          @click="changeselectType(2)"
        >
          分类统计
        </p>
      </div>
      <template v-if="selectType == 1">
        <div class="query_dayBox">
          <div class="query_day">
            <el-date-picker
              v-model="datevalue"
              type="daterange"
              class="mydatepicker"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changeDate"
            />
            <div class="query_datelist">
              <div
                v-for="(item, index) in datenamelist"
                :key="index"
                :class="datenameIndex == index ? 'currentdatetype' : ''"
                @click="querydate(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div v-if="data_stats_download_auth">
            <download-excel
              class="export-excel-wrapper"
              :header="fileheadername"
              :data="json_data"
              :fields="json_fields"
              :name="filename"
            >
              下载 <i class="el-icon-download"></i>
            </download-excel>
          </div>
        </div>
        <div class="tableList">
          <div class="table_title">
            <div class="modul modul_one">
              <div class="info_nest">地区</div>
              <div>新发现</div>
              <div>忽略</div>
              <div>上报</div>
              <div>协同</div>
            </div>
            <div class="modul modul_two">
              <div>受理</div>
              <div>退回</div>
              <div>逾期</div>
              <div>办结</div>
            </div>
            <div class="modul modul_three">
              <div>上报率</div>
              <div>协同率</div>
              <div>受理率</div>
              <div>退回率</div>
              <div>逾期率</div>
              <div>办结率</div>
              <!-- <div class="userpretime">平均处理时长</div> -->
            </div>
          </div>
          <!-- /////////// 合计数据 //////////// -->
          <div class="table_overflow">
            <div class="count_title">
              <div class="modul modul_one">
                <div class="info_nest">合计</div>
                <div>{{ sumInfo.event1 }}</div>
                <div>{{ sumInfo.event1_0 }}</div>
                <div>{{ sumInfo.event2 }}</div>
                <div>{{ sumInfo.event3 }}</div>
              </div>
              <div class="modul modul_two">
                <div>{{ sumInfo.event4 }}</div>
                <div>{{ sumInfo.event5 }}</div>
                <div>{{ sumInfo.event6 }}</div>
                <div>{{ sumInfo.event7 }}</div>
              </div>
              <div class="modul modul_three">
                <div>
                  <div class="shangbao_box">
                    <p
                      v-if="sumInfo.event1 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfo.event2 / sumInfo.event1) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfo.event1 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfo.event2 / sumInfo.event1) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfo.event2 / sumInfo.event1) * 100).toFixed(0)
                    }}%</span
                  >
                </div>
                <div>
                  <div class="xietong_box">
                    <p
                      v-if="sumInfo.event2 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfo.event3 / sumInfo.event2) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfo.event2 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfo.event3 / sumInfo.event2) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfo.event3 / sumInfo.event2) * 100).toFixed(0)
                    }}%</span
                  >
                </div>
                <div>
                  <div class="shouji_box">
                    <p
                      v-if="sumInfo.event3 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfo.event4 / sumInfo.event3) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfo.event3 == 0">--</span>
                  <span
                    >{{
                      ((sumInfo.event4 / sumInfo.event3) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfo.event4 / sumInfo.event3) * 100).toFixed(0)
                    }}%</span
                  >
                </div>
                <div>
                  <div class="tuihui_box">
                    <p
                      v-if="sumInfo.event3 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfo.event5 / sumInfo.event3) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfo.event3 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfo.event5 / sumInfo.event3) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfo.event5 / sumInfo.event3) * 100).toFixed(0)
                    }}%</span
                  >
                </div>
                <div>
                  <div class="yuqi_box">
                    <p
                      v-if="sumInfo.event2 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfo.event6 / sumInfo.event2) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfo.event2 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfo.event6 / sumInfo.event2) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfo.event6 / sumInfo.event2) * 100).toFixed(0)
                    }}%</span
                  >
                </div>
                <div>
                  <div class="banjie_box">
                    <p
                      v-if="sumInfo.event4 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfo.event7 / sumInfo.event4) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfo.event4 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfo.event7 / sumInfo.event4) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfo.event7 / sumInfo.event4) * 100).toFixed(0)
                    }}%</span
                  >
                </div>
                <!-- <div class="userpretime">
                {{ formatTimeDiff(sumInfo.time / tableData.length) || "0" }}
              </div> -->
              </div>
            </div>
            <!-- ////////////////// -->
            <div class="table_list">
              <div
                class="table_info"
                v-for="(item, index) in tableData"
                :key="index"
              >
                <div class="infobox">
                  <!-- ///////////////////这里是列表机巢信息汇总 -->
                  <div class="info_data">
                    <div class="havemoretitle">
                      <div
                        class="info_nest info_nest_count"
                        @click="isShowAllArea(item, index)"
                      >
                        <div>{{ item.district }}</div>
                        <i v-show="!item.isShow" class="el-icon-arrow-down"></i>
                        <i v-show="item.isShow" class="el-icon-arrow-up"></i>
                      </div>
                      <div>{{ formatCount(item.towns, "event1") }}</div>
                      <div>{{ formatCount(item.towns, "event1_0") }}</div>
                      <div>{{ formatCount(item.towns, "event2") }}</div>
                      <div>{{ formatCount(item.towns, "event3") }}</div>
                    </div>

                    <div class="havemoretitle">
                      <div>{{ formatCount(item.towns, "event4") }}</div>
                      <div>{{ formatCount(item.towns, "event5") }}</div>
                      <div>{{ formatCount(item.towns, "event6") }}</div>
                      <div>{{ formatCount(item.towns, "event7") }}</div>
                    </div>
                    <div class="havemoretitle modul_three">
                      <div>
                        <div class="shangbao_box">
                          <p
                            v-if="formatCount(item.towns, 'event1') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.towns, 'event2') /
                                    formatCount(item.towns, 'event1')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.towns, 'event1') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.towns, "event2") /
                                formatCount(item.towns, "event1")) *
                              100
                            ).toFixed(0) == "NaN"
                              ? "0"
                              : (
                                  (formatCount(item.towns, "event2") /
                                    formatCount(item.towns, "event1")) *
                                  100
                                ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="xietong_box">
                          <p
                            v-if="formatCount(item.towns, 'event2') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.towns, 'event3') /
                                    formatCount(item.towns, 'event2')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.towns, 'event2') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.towns, "event3") /
                                formatCount(item.towns, "event2")) *
                              100
                            ).toFixed(0) == "NaN"
                              ? "0"
                              : (
                                  (formatCount(item.towns, "event3") /
                                    formatCount(item.towns, "event2")) *
                                  100
                                ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="shouji_box">
                          <p
                            v-if="formatCount(item.towns, 'event3') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.towns, 'event4') /
                                    formatCount(item.towns, 'event3')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.towns, 'event3') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.towns, "event4") /
                                formatCount(item.towns, "event3")) *
                              100
                            ).toFixed(0) == "NaN"
                              ? "0"
                              : (
                                  (formatCount(item.towns, "event4") /
                                    formatCount(item.towns, "event3")) *
                                  100
                                ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="tuihui_box">
                          <p
                            v-if="formatCount(item.towns, 'event3') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            :style="{
                              width:
                                (
                                  (formatCount(item.towns, 'event5') /
                                    formatCount(item.towns, 'event3')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.towns, 'event3') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.towns, "event5") /
                                formatCount(item.towns, "event3")) *
                              100
                            ).toFixed(0) == "NaN"
                              ? "0"
                              : (
                                  (formatCount(item.towns, "event5") /
                                    formatCount(item.towns, "event3")) *
                                  100
                                ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="yuqi_box">
                          <p
                            v-if="formatCount(item.towns, 'event2') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.towns, 'event6') /
                                    formatCount(item.towns, 'event2')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.towns, 'event2') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.towns, "event6") /
                                formatCount(item.towns, "event2")) *
                              100
                            ).toFixed(0) == "NaN"
                              ? "0"
                              : (
                                  (formatCount(item.towns, "event6") /
                                    formatCount(item.towns, "event2")) *
                                  100
                                ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="banjie_box">
                          <p
                            v-if="formatCount(item.towns, 'event4') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.towns, 'event7') /
                                    formatCount(item.towns, 'event4')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.towns, 'event4') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.towns, "event7") /
                                formatCount(item.towns, "event4")) *
                              100
                            ).toFixed(0) == "NaN"
                              ? "0"
                              : (
                                  (formatCount(item.towns, "event7") /
                                    formatCount(item.towns, "event4")) *
                                  100
                                ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <!-- <div class="userpretime">
                      {{
                        formatTimeDiff(
                          formatCount(item.towns, "time") / item.towns.length
                        ) || "0"
                      }}
                    </div> -->
                    </div>
                  </div>
                  <!-- ////////////// -->

                  <div :class="item.isShow ? '' : 'isShowAll'">
                    <div
                      class="info_data info_data_list"
                      v-for="(item2, index2) in item.towns"
                      :key="index2 + '_' + index"
                    >
                      <div class="havemoretitle">
                        <div class="info_nest info_areaname">
                          {{ item2.town }}
                        </div>
                        <div>{{ item2.new_event }}</div>
                        <div>{{ item2.ignore_event }}</div>
                        <div>{{ item2.submit_event }}</div>
                        <div>{{ item2.fenliu_event }}</div>
                      </div>
                      <div class="havemoretitle">
                        <div>{{ item2.acceptance_event }}</div>
                        <div>{{ item2.back_event }}</div>
                        <div>{{ item2.wei_fan_kui_event }}</div>
                        <div>{{ item2.completed_event }}</div>
                      </div>
                      <div class="havemoretitle modul_three">
                        <div>
                          <div class="shangbao_box">
                            <p
                              v-if="item2.new_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.submit_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.new_event == 0"> --</span>
                          <span v-else>
                            {{ (item2.submit_percent * 100).toFixed(0) }}%</span
                          >
                        </div>
                        <div>
                          <div class="xietong_box">
                            <p
                              v-if="item2.submit_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              :style="{
                                width:
                                  ((item2.flow_percent || 0) * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.submit_event == 0"> --</span>
                          <span v-else>
                            {{
                              ((item2.flow_percent || 0) * 100).toFixed(0)
                            }}%</span
                          >
                        </div>
                        <div>
                          <div class="shouji_box">
                            <p
                              v-if="item2.fenliu_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              :style="{
                                width:
                                  (item2.acceptance_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.fenliu_event == 0"> --</span>
                          <span v-else>
                            {{
                              (item2.acceptance_percent * 100).toFixed(0)
                            }}%</span
                          >
                        </div>
                        <div>
                          <div class="tuihui_box">
                            <p
                              v-if="item2.fenliu_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              :style="{
                                width:
                                  (item2.back_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.fenliu_event == 0">--</span>
                          <span v-else
                            >{{ (item2.back_percent * 100).toFixed(0) }}%</span
                          >
                        </div>
                        <div>
                          <div class="yuqi_box">
                            <p
                              v-if="item2.submit_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.overdue_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.submit_event == 0">--</span>
                          <span v-else
                            >{{
                              (item2.overdue_percent * 100).toFixed(0)
                            }}%</span
                          >
                        </div>
                        <div>
                          <div class="banjie_box">
                            <p
                              v-if="item2.acceptance_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.completed_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.acceptance_event == 0">--</span>
                          <span v-else
                            >{{
                              (item2.completed_percent * 100).toFixed(0)
                            }}%</span
                          >
                        </div>
                        <!-- <div class="userpretime">
                        {{ formatTimeDiff(item2.avg_handle_time) }}
                      </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 下面是按照分类统计 -->

      <template v-if="selectType == 2">
        <div class="query_dayBox">
          <div class="query_day">
            <div class="filter_area" id="filter_area">
              <label>地区</label>
              <el-select
                v-model="searchLabelIndex"
                filterable
                placeholder="请选择筛选地区"
              >
                <el-option
                  v-for="(item, index) in searchLabelList"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
            </div>

            <el-date-picker
              v-model="datevalue_t"
              type="daterange"
              class="mydatepicker"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changeDateT"
            />
            <div class="query_datelist">
              <div
                v-for="(item, index) in datenamelist_t"
                :key="index"
                :class="datenameIndex_t == index ? 'currentdatetype' : ''"
                @click="querydateT(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div v-if="data_stats_download_auth">
            <download-excel
              class="export-excel-wrapper"
              :header="fileheadernameT"
              :data="json_dataT"
              :fields="json_fieldsT"
              :name="filenameT"
            >
              下载 <i class="el-icon-download"></i>
            </download-excel>
          </div>
        </div>
        <div class="tableList">
          <div class="table_title">
            <div class="modul modul_one">
              <div class="info_nest">类别</div>
              <div>新发现</div>
              <div>忽略</div>
              <div>上报</div>
              <div>协同</div>
            </div>
            <div class="modul modul_two">
              <div>受理</div>
              <div>退回</div>
              <div>逾期</div>
              <div>办结</div>
            </div>
            <div class="modul modul_three">
              <div>上报率</div>
              <div>协同率</div>

              <div>受理率</div>
              <div>退回率</div>
              <div>逾期率</div>
              <div>办结率</div>
              <!-- <div class="userpretime">平均处理时长</div> -->
            </div>
          </div>
          <!-- /////////// 合计数据 //////////// -->
          <div class="table_overflow">
            <div class="count_title">
              <div class="modul modul_one">
                <div class="info_nest">合计</div>
                <div>{{ sumInfoT.event_1 }}</div>
                <div>{{ sumInfoT.event_1_1 }}</div>
                <div>{{ sumInfoT.event2 }}</div>
                <div>{{ sumInfoT.event3 }}</div>
              </div>
              <div class="modul modul_two">
                <div>{{ sumInfoT.event4 }}</div>
                <div>{{ sumInfoT.event5 }}</div>
                <div>{{ sumInfoT.event6 }}</div>
                <div>{{ sumInfoT.event_7 }}</div>
              </div>
              <div class="modul modul_three">
                <div>
                  <!-- 上报率 -->
                  <div class="shangbao_box">
                    <p
                      v-if="sumInfoT.event_1 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfoT.event2 / sumInfoT.event_1) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfoT.event_1 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfoT.event2 / sumInfoT.event_1) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfoT.event2 / sumInfoT.event_1) * 100).toFixed(
                            0
                          )
                    }}%</span
                  >
                </div>
                <div>
                  <!-- 协同率 -->
                  <div class="xietong_box">
                    <p
                      v-if="sumInfoT.event2 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfoT.event3 / sumInfoT.event2) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfoT.event2 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfoT.event3 / sumInfoT.event2) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfoT.event3 / sumInfoT.event2) * 100).toFixed(
                            0
                          )
                    }}%</span
                  >
                </div>
                <div>
                  <div class="shouji_box">
                    <p
                      v-if="sumInfoT.event3 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfoT.event4 / sumInfoT.event3) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfoT.event3 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfoT.event4 / sumInfoT.event3) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfoT.event4 / sumInfoT.event3) * 100).toFixed(
                            0
                          )
                    }}%</span
                  >
                </div>
                <div>
                  <div class="tuihui_box">
                    <p
                      v-if="sumInfoT.event3 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfoT.event5 / sumInfoT.event3) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfoT.event3 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfoT.event5 / sumInfoT.event3) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfoT.event5 / sumInfoT.event3) * 100).toFixed(
                            0
                          )
                    }}%</span
                  >
                </div>
                <div>
                  <div class="yuqi_box">
                    <p
                      v-if="sumInfoT.event2 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfoT.event6 / sumInfoT.event2) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfoT.event2 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfoT.event6 / sumInfoT.event2) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfoT.event6 / sumInfoT.event2) * 100).toFixed(
                            0
                          )
                    }}%</span
                  >
                </div>
                <div>
                  <div class="banjie_box">
                    <p
                      v-if="sumInfoT.event4 == 0"
                      :style="{
                        width: 0 + '%',
                      }"
                    ></p>
                    <p
                      v-else
                      :style="{
                        width:
                          ((sumInfoT.event_7 / sumInfoT.event4) * 100)
                            .toFixed(0)
                            .toString() + '%',
                      }"
                    ></p>
                  </div>
                  <span v-if="sumInfoT.event4 == 0">--</span>
                  <span v-else
                    >{{
                      ((sumInfoT.event_7 / sumInfoT.event4) * 100).toFixed(0) ==
                      "NaN"
                        ? "0"
                        : ((sumInfoT.event_7 / sumInfoT.event4) * 100).toFixed(
                            0
                          )
                    }}%</span
                  >
                </div>
                <!-- <div class="userpretime">
                {{ formatTimeDiff(sumInfoT.time / tableData_t.length) }}
              </div> -->
              </div>
            </div>
            <!-- ////////////////// -->
            <div class="table_list">
              <div
                class="table_info"
                v-for="(item, index) in tableData_t"
                :key="index"
              >
                <div class="infobox">
                  <!-- ///////////////////这里是列表机巢信息汇总 -->
                  <div class="info_data">
                    <div class="havemoretitle">
                      <div
                        class="info_nest info_nest_count"
                        @click="isShowAllAreaT(item, index)"
                      >
                        <div>{{ item.scene_type || "暂无名称" }}</div>
                        <i v-show="!item.isShow" class="el-icon-arrow-down"></i>
                        <i v-show="item.isShow" class="el-icon-arrow-up"></i>
                      </div>
                      <div>{{ formatCount(item.scenes, "event_1") }}</div>
                      <div>{{ formatCount(item.scenes, "event_1_1") }}</div>
                      <div>{{ formatCount(item.scenes, "event2") }}</div>
                      <div>{{ formatCount(item.scenes, "event3") }}</div>
                    </div>

                    <div class="havemoretitle">
                      <div>{{ formatCount(item.scenes, "event4") }}</div>
                      <div>{{ formatCount(item.scenes, "event5") }}</div>
                      <div>{{ formatCount(item.scenes, "event6") }}</div>
                      <div>{{ formatCount(item.scenes, "event_7") }}</div>
                    </div>
                    <div class="havemoretitle modul_three">
                      <!-- 上报率 -->
                      <div>
                        <div class="shangbao_box">
                          <p
                            v-if="formatCount(item.scenes, 'event_1') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.scenes, 'event2') /
                                    formatCount(item.scenes, 'event_1')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.scenes, 'event_1') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.scenes, "event2") /
                                formatCount(item.scenes, "event_1")) *
                              100
                            ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <!-- 协同率 -->
                        <div class="xietong_box">
                          <p
                            v-if="formatCount(item.scenes, 'event2') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.scenes, 'event3') /
                                    formatCount(item.scenes, 'event2')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.scenes, 'event2') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.scenes, "event3") /
                                formatCount(item.scenes, "event2")) *
                              100
                            ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="shouji_box">
                          <p
                            v-if="formatCount(item.scenes, 'event3') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.scenes, 'event4') /
                                    formatCount(item.scenes, 'event3')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.scenes, 'event3') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.scenes, "event4") /
                                formatCount(item.scenes, "event3")) *
                              100
                            ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="tuihui_box">
                          <p
                            v-if="formatCount(item.scenes, 'event3') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.scenes, 'event5') /
                                    formatCount(item.scenes, 'event3')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.scenes, 'event3') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.scenes, "event5") /
                                formatCount(item.scenes, "event3")) *
                              100
                            ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="yuqi_box">
                          <p
                            v-if="formatCount(item.scenes, 'event2') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.scenes, 'event6') /
                                    formatCount(item.scenes, 'event2')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.scenes, 'event2') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.scenes, "event6") /
                                formatCount(item.scenes, "event2")) *
                              100
                            ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <div>
                        <div class="banjie_box">
                          <p
                            v-if="formatCount(item.scenes, 'event4') == 0"
                            :style="{
                              width: 0 + '%',
                            }"
                          ></p>
                          <p
                            v-else
                            :style="{
                              width:
                                (
                                  (formatCount(item.scenes, 'event_7') /
                                    formatCount(item.scenes, 'event4')) *
                                  100
                                )
                                  .toFixed(0)
                                  .toString() + '%',
                            }"
                          ></p>
                        </div>
                        <span v-if="formatCount(item.scenes, 'event4') == 0"
                          >--</span
                        >
                        <span v-else
                          >{{
                            (
                              (formatCount(item.scenes, "event_7") /
                                formatCount(item.scenes, "event4")) *
                              100
                            ).toFixed(0)
                          }}%</span
                        >
                      </div>
                      <!-- <div class="userpretime">
                      {{
                        formatTimeDiff(
                          formatCount(item.scenes, "time") / item.scenes.length
                        )
                      }}
                    </div> -->
                    </div>
                  </div>
                  <!-- ////////////// -->

                  <div :class="item.isShow ? '' : 'isShowAll'">
                    <div
                      class="info_data info_data_list"
                      v-for="(item2, index2) in item.scenes"
                      :key="index2 + '_' + index"
                    >
                      <div class="havemoretitle">
                        <div class="info_nest info_areaname">
                          {{ item2.type }}
                        </div>
                        <div>{{ item2.new_event }}</div>
                        <div>{{ item2.ignore_event }}</div>
                        <div>{{ item2.submit_event }}</div>
                        <div>{{ item2.fenliu_event }}</div>
                      </div>
                      <div class="havemoretitle">
                        <div>{{ item2.acceptance_event }}</div>
                        <div>{{ item2.back_event }}</div>
                        <div>{{ item2.wei_fan_kui_event }}</div>
                        <div>{{ item2.completed_event }}</div>
                      </div>
                      <div class="havemoretitle modul_three">
                        <!-- 上报率 -->
                        <div>
                          <div class="shangbao_box">
                            <p
                              v-if="item2.new_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.submit_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.new_event == 0"> --</span>
                          <span v-else>
                            {{ (item2.submit_percent * 100).toFixed(0) }}%</span
                          >
                        </div>
                        <!-- 协同率 -->
                        <div>
                          <div class="xietong_box">
                            <p
                              v-if="item2.submit_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              :style="{
                                width:
                                  (item2.flow_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.submit_event == 0"> --</span>
                          <span v-else>
                            {{ (item2.flow_percent * 100).toFixed(0) }}%</span
                          >
                        </div>
                        <div>
                          <div class="shouji_box">
                            <p
                              v-if="item2.fenliu_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.acceptance_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.fenliu_event == 0"> --</span>
                          <span v-else>
                            {{
                              (item2.acceptance_percent * 100).toFixed(0)
                            }}%</span
                          >
                        </div>
                        <div>
                          <div class="tuihui_box">
                            <p
                              v-if="item2.fenliu_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.back_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.fenliu_event == 0">--</span>
                          <span v-else
                            >{{ (item2.back_percent * 100).toFixed(0) }}%</span
                          >
                        </div>
                        <div>
                          <div class="yuqi_box">
                            <p
                              v-if="item2.fenliu_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.overdue_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.fenliu_event == 0">--</span>
                          <span v-else
                            >{{
                              (item2.overdue_percent * 100).toFixed(0)
                            }}%</span
                          >
                        </div>
                        <div>
                          <div class="banjie_box">
                            <p
                              v-if="item2.acceptance_event == 0"
                              :style="{
                                width: 0 + '%',
                              }"
                            ></p>
                            <p
                              v-else
                              :style="{
                                width:
                                  (item2.completed_percent * 100)
                                    .toFixed(0)
                                    .toString() + '%',
                              }"
                            ></p>
                          </div>
                          <span v-if="item2.acceptance_event == 0">--</span>
                          <span v-else
                            >{{
                              (item2.completed_percent * 100).toFixed(0)
                            }}%</span
                          >
                        </div>
                        <!-- <div class="userpretime">
                        {{ formatTimeDiff(item2.avg_handle_time) || "0" }}
                      </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="maskplan" v-show="isShowMask">
      <div>
        <i class="el-icon-loading"></i>
        <p class="el-loading-text">Loading</p>
      </div>
    </div>
  </div>
</template>
<script>
import {
  kanbanDetailEventRegional2,
  kanbanDetailEventType2,
  kanbanNestDistrict,
} from "@/api/censuisdata";

export default {
  props: {
    selectTypeNum: {
      type: Number,
      default: () => 1,
    },
    inputDate: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // 权限
    // 数据统计 下载
    data_stats_download_auth() {
      return this.userAuthor?.data_stats?.download?.have_auth;
    },
    sumInfo: function () {
      var _this = this;
      var obj = {
        event1: 0,
        event1_0: 0,
        event2: 0,
        event3: 0,
        event4: 0,
        event5: 0,
        event6: 0,
        event7: 0,
        percent1_1: 0,
        percent1_2: 0,
        percent1: 0,
        percent2: 0,
        percent3: 0,
        percent4: 0,
        time: 0,
      };
      _this.tableData.forEach((item, index) => {
        obj.percent1_1 +=
          _this.formatCount(item.towns, "percent1_1") / item.towns.length;
        obj.percent1_2 +=
          _this.formatCount(item.towns, "percent1_2") / item.towns.length;
        obj.percent1 +=
          _this.formatCount(item.towns, "percent1") / item.towns.length;
        obj.percent2 +=
          _this.formatCount(item.towns, "percent2") / item.towns.length;
        obj.percent3 +=
          _this.formatCount(item.towns, "percent3") / item.towns.length;
        obj.percent4 +=
          _this.formatCount(item.towns, "percent4") / item.towns.length;
        obj.time += _this.formatCount(item.towns, "time") / item.towns.length;
        item.towns.forEach((item2, index2) => {
          obj.event1 += item2.new_event;
          obj.event1_0 += item2.ignore_event;
          obj.event2 += item2.submit_event;
          obj.event3 += item2.fenliu_event;
          obj.event4 += item2.acceptance_event;
          obj.event5 += item2.back_event;
          obj.event6 += item2.wei_fan_kui_event;
          obj.event7 += item2.completed_event;
        });
      });
      return obj;
    },
    sumInfoT: function () {
      var _this = this;
      var obj = {
        event_1: 0,
        event_1_1: 0,
        event2: 0,
        event3: 0,
        event4: 0,
        event5: 0,
        event6: 0,
        event_7: 0,
        percent1: 0,
        percent2: 0,
        percent3: 0,
        percent4: 0,
        time: 0,
      };
      _this.tableData_t.forEach((item, index) => {
        obj.percent1 +=
          _this.formatCount(item.scenes, "percent1") / item.scenes.length;
        obj.percent2 +=
          _this.formatCount(item.scenes, "percent2") / item.scenes.length;
        obj.percent3 +=
          _this.formatCount(item.scenes, "percent3") / item.scenes.length;
        obj.percent4 +=
          _this.formatCount(item.scenes, "percent4") / item.scenes.length;
        obj.time += _this.formatCount(item.scenes, "time") / item.scenes.length;
        item.scenes.forEach((item2, index2) => {
          obj.event_1 += item2.new_event;
          obj.event_1_1 += item2.ignore_event;
          obj.event2 += item2.submit_event;
          obj.event3 += item2.fenliu_event;
          obj.event4 += item2.acceptance_event;
          obj.event5 += item2.back_event;
          obj.event6 += item2.wei_fan_kui_event;
          obj.event_7 += item2.completed_event;
        });
      });
      return obj;
    },
  },
  data() {
    return {
      json_fields: {
        地区: "district",
        地区下一级: "next_district",
        新发现: "new_event",
        忽略: "ignore_event",
        上报: "submit_event",
        协同: "fenliu_event",
        受理: "acceptance_event",
        退回: "back_event",
        逾期: "wei_fan_kui_event",
        办结: "completed_event",
        "上报率(上报/新发现)": "submit_percent",
        "协同率(协同/上报)": "flow_percent",
        "受理率(受理/协同)": "acceptance_percent",
        "退回率(退回/协同)": "back_percent",
        "逾期率(逾期/上报)": "overdue_percent",
        "办结率(办结/受理)": "completed_percent",
      },
      json_data: [],
      filename: "事件分类统计明细-区域统计",
      fileheadername: "",
      json_fieldsT: {
        大类: "district",
        大类下一级: "next_district",
        新发现: "new_event",
        忽略: "ignore_event",
        上报: "submit_event",
        协同: "fenliu_event",
        受理: "acceptance_event",
        退回: "back_event",
        逾期: "wei_fan_kui_event",
        办结: "completed_event",
        "上报率(上报/新发现)": "submit_percent",
        "协同率(协同/上报)": "flow_percent",
        "受理率(受理/协同)": "acceptance_percent",
        "退回率(退回/协同)": "back_percent",
        "逾期率(逾期/上报)": "overdue_percent",
        "办结率(办结/受理)": "completed_percent",
      },
      json_dataT: [],
      filenameT: "事件分类统计明细-分类统计",
      fileheadernameT: "",
      selectType: 1,
      tableData: [],
      countInfo: {},
      tableData_t: [],
      countInfo_t: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      datevalue: [],
      datevalue_t: [],
      datenamelist: [
        {
          type: "1",
          name: "近7天",
        },
        {
          type: "2",
          name: "近30天",
        },
        {
          type: "3",
          name: "本月",
        },
        {
          type: "4",
          name: "上月",
        },
      ],
      datenamelist_t: [
        {
          type: "1",
          name: "近3个月",
        },
        {
          type: "2",
          name: "近半年",
        },
        {
          type: "3",
          name: "今年",
        },
        {
          type: "4",
          name: "全部",
        },
      ],
      datenameIndex: 0,
      nestCodeList: [],
      datenameIndex_t: 0,
      nestCodeList_t: [],
      searchLabel: "",
      searchLabelIndex: 0,
      searchLabelList: [],
      isShowMask: false,

      userAuthor: null,
    };
  },
  created() {
    this.userAuthor = this.$store.getters.userAuth;
    this.getSearchLabelList();
  },
  mounted() {
    if (this.inputDate && this.inputDate.length === 2) {
      this.datevalue = this.inputDate;
      this.datevalue_t = this.inputDate;
      this.datenameIndex_t = null;
      this.datenameIndex = null;
    } else {
      this.datevalue = this.setDefaultDateRange(6);
      this.datevalue_t = this.setDefaultDateRange(90);
    }
    this.isShowMask = true;
    this.selectType = this.selectTypeNum;
    if (this.selectType == 1) {
      this.initData("0");
    } else if (this.selectType == 2) {
      this.initDataT("4");
    }
  },

  methods: {
    getSearchLabelList() {
      kanbanNestDistrict({ dept_id: this.$store.getters.deptId }).then(
        (res) => {
          
          this.searchLabelList = res.data;
          this.searchLabelList.unshift("全部");
        }
      );
    },
    filterAreaData() {
      var that = this;
      let _search = that.searchLabel.toLowerCase();
      let newListData = []; // 用于存放搜索出来数据的新数组
      if (_search) {
        that.tableData_t.forEach((item) => {
          var districts = [];
          item.districts.filter((item2) => {
            if (item2.district.toLowerCase().indexOf(_search) !== -1) {
              districts.push(item2);
            }
          });
          newListData.push({ districts: districts, month: item.month });
        });
      }
      console.log(newListData);
      that.tableData_t = newListData;
    },
    changeselectType(type) {
      this.selectType = type;
      if (type == 1) {
        this.initData();
      } else if (type == 2) {
        this.initDataT();
      }
      console.log(this.selectType);
    },
    setType(data) {
      console.log(data);
    },
    initData(num) {
      var _this = this;
      const loading = _this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      if (num == "0") {
        loading.close();
      }
      if (this.datevalue) {
        kanbanDetailEventRegional2({
          begin_date: _this.datevalue[0],
          end_date: _this.datevalue[1],
          user_id: _this.$store.getters.userInfo.id, //这里开发的时候用到，上传线上需要去掉
          dept_id: this.$store.getters.deptId,
        })
          .then((res) => {
            if (num == "0") {
              _this.isShowMask = false;
            } else {
              loading.close();
            }
            if (res.msg == "ok") {
              if (res.data) {
                _this.tableData = res.data;
              } else {
                _this.tableData = [];
                _this.$message({
                  message: "暂无数据",
                  type: "info",
                });
              }
            } else {
              _this.tableData = [];
              _this.isShowMask = false;
              loading.close();
              _this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            _this.tableData = [];
            _this.$message({
              message: "暂无数据,请稍后重试",
              type: "warning",
            });
            if (num == "0") {
            } else {
              loading.close();
            }
          });
      } else {
        _this.datevalue = this.setDefaultDateRange(6);
        _this.initData();
      }
    },
    initDataT(num) {
      var _this = this;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      if (num == "4") {
        loading.close();
      }
      console.log(this.datevalue_t);
      if (this.datevalue_t) {
        kanbanDetailEventType2({
          begin_date: _this.datevalue_t[0],
          end_date: _this.datevalue_t[1],
          district: _this.searchLabel,
          user_id: _this.$store.getters.userInfo.id, //这里开发的时候用到，上传线上需要去掉
          dept_id: this.$store.getters.deptId,
        })
          .then((res) => {
            if (num == "4") {
              _this.isShowMask = false;
            } else {
              loading.close();
            }
            if (res.msg == "ok") {
              if (res.data) {
                _this.tableData_t = res.data;
              } else {
                _this.tableData_t = [];
                _this.$message({
                  message: "暂无数据",
                  type: "info",
                });
              }
            } else {
              _this.tableData_t = [];
              _this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            loading.close();
            _this.tableData_t = [];
            _this.$message({
              message: "暂无数据,请稍后重试",
              type: "warning",
            });
          });
      } else {
        _this.datevalue_t = this.setDefaultDateRange(90);
        _this.initDataT();
      }
    },
    isShowAllArea(item, index) {
      console.log(item, index);
      var that = this;
      if (!that.tableData[index].isShow) {
        that.$set(that.tableData[index], "isShow", true);
      } else {
        that.$set(that.tableData[index], "isShow", false);
      }
    },
    isShowAllAreaT(item, index) {
      console.log(item, index);
      var that = this;
      if (!that.tableData_t[index].isShow) {
        that.$set(that.tableData_t[index], "isShow", true);
      } else {
        that.$set(that.tableData_t[index], "isShow", false);
      }
    },
    formatCount(data, type) {
      var count = 0;
      data.forEach((item, index) => {
        switch (type) {
          case "event1":
            count += Number(item.new_event);
            break;
          case "event_1":
            count += Number(item.new_event);
            break;
          case "event_1_0":
            count += Number(item.ignore_event);
            break;
          case "event_1_1":
            count += Number(item.ignore_event);
            break;
          case "event2":
            count += Number(item.submit_event);
            break;
          case "event3":
            count += Number(item.fenliu_event);
            break;
          case "event4":
            count += Number(item.acceptance_event);
            break;
          case "event5":
            count += Number(item.back_event);
            break;
          case "event6":
            count += Number(item.wei_fan_kui_event);
            break;
          case "event7":
            count += Number(item.completed_event);
            break;
          case "event_7":
            count += Number(item.completed_event);
            break;
          case "percent1_1":
            count += Number(item.submit_percent);
            break;
          case "percent1_2":
            count += Number(item.flow_percent);
            break;
          case "percent2":
            count += Number(item.back_percent);
            break;
          case "percent3":
            count += Number(item.overdue_percent);
            break;
          case "percent4":
            count += Number(item.completed_percent);
            break;
          case "time":
            count += Number(item.avg_handle_time);
            break;
        }
      });
      return count;
    },
    formatTimeDiff(time) {
      var diffTime;
      var diffNum = time / 60;
      if (diffNum <= 60) {
        if (diffNum.toString().indexOf(".") == -1) {
          diffTime = diffNum + "分钟";
        } else {
          diffTime = diffNum.toFixed(2) + "分钟";
        }
      }
      if (diffNum > 60) {
        diffNum = diffNum / 60;
        if (diffNum <= 24) {
          if (diffNum.toString().indexOf(".") == -1) {
            diffTime = diffNum + "小时";
          } else {
            diffTime = diffNum.toFixed(2) + "小时";
          }
        } else {
          diffNum = diffNum / 24;
          if (diffNum.toString().indexOf(".") == -1) {
            diffTime = diffNum + "天";
          } else {
            diffTime = diffNum.toFixed(2) + "天";
          }
        }
      }
      return diffTime;
    },
    changeDate(e) {
      console.log(e);
      this.datenameIndex = null;
      this.datevalue = e;
      this.initData();
    },
    changeDateT(e) {
      console.log(e);
      this.datenameIndex_t = null;
      this.datevalue_t = e;
      this.initDataT();
    },
    querydate(data, index) {
      var that = this;

      if (data.type == "1") {
        that.datevalue = that.setDefaultDateRange(6);
      }
      if (data.type == "2") {
        that.datevalue = that.setDefaultDateRange(30);
      }
      if (data.type == "3") {
        that.datevalue = [
          that.getMonth("s", 0),
          that.setDefaultDateRange(0)[0],
        ];
      }
      if (data.type == "4") {
        that.datevalue = [that.getMonth("s", -1), that.getMonth("e", -1)];
      }
      that.datenameIndex = index;
      console.log(that.datevalue);
      that.initData();
    },
    querydateT(data, index) {
      var that = this;
      var date = new Date();
      const year = date.getFullYear();
      const month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1);
      const strDate =
        date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
      console.log(year + "-" + month + "-" + strDate);
      var firstday = year + "-01-01";
      var today = year + "-" + month + "-" + strDate;
      if (data.type == "1") {
        that.datevalue_t = that.setDefaultDateRange(90);
      }
      if (data.type == "2") {
        that.datevalue_t = that.setDefaultDateRange(180);
      }
      if (data.type == "3") {
        that.datevalue_t = [firstday, today];
      }
      if (data.type == "4") {
        that.datevalue_t = ["2021-01-01", today];
      }
      that.datenameIndex_t = index;
      console.log(that.datevalue_t);
      that.initDataT();
    },
    setDefaultDateRange(num) {
      var datePickerData;
      const endDate = new Date();
      const startDate = new Date();
      startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * num);
      //   endDate.setTime(endDate.getTime() + 3600 * 1000 * 24)
      endDate.setTime(endDate.getTime());
      const startStr = this.date2Str(startDate);
      const endStr = this.date2Str(endDate);
      datePickerData = [startStr, endStr];
      return datePickerData;
    },
    date2Str(date) {
      console.log("date2Str3", date);
      if (date instanceof Date) {
        const year = date.getFullYear();
        const month =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : "" + (date.getMonth() + 1);
        const strDate =
          date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
        return year + "-" + month + "-" + strDate;
      }
      return "2022-10-10";
    },
    getMonth(type, months) {
      var d = new Date();
      var year = d.getFullYear();
      var month = d.getMonth() + 1;
      if (Math.abs(months) > 12) {
        months = months % 12;
      }
      if (months != 0) {
        if (month + months > 12) {
          year++;
          month = (month + months) % 12;
        } else if (month + months < 1) {
          year--;
          month = 12 + month + months;
        } else {
          month = month + months;
        }
      }
      month = month < 10 ? "0" + month : month;
      var date = d.getDate();
      var firstday = year + "-" + month + "-" + "01";
      var lastday = "";
      if (
        month == "01" ||
        month == "03" ||
        month == "05" ||
        month == "07" ||
        month == "08" ||
        month == "10" ||
        month == "12"
      ) {
        lastday = year + "-" + month + "-" + 31;
      } else if (month == "02") {
        if (
          (year % 4 == 0 && year % 100 != 0) ||
          (year % 100 == 0 && year % 400 == 0)
        ) {
          lastday = year + "-" + month + "-" + 29;
        } else {
          lastday = year + "-" + month + "-" + 28;
        }
      } else {
        lastday = year + "-" + month + "-" + 30;
      }
      var day = "";
      if (type == "s") {
        day = firstday;
      } else {
        day = lastday;
      }
      return day;
    },
  },
  watch: {
    searchLabelIndex(val) {
      var _this = this;
      _this.searchLabel = _this.searchLabelList[val];
      console.log(_this.searchLabel);
      if (_this.searchLabel == "全部") {
        _this.searchLabel = "";
      }
      _this.initDataT();
    },
    inputDate(date) {
      this.datevalue = date;
      this.datevalue_t = date;
      this.datenameIndex_t = null;
      this.datenameIndex = null;
      if (this.selectType == 1) {
        this.initData("0");
      } else if (this.selectType == 2) {
        this.initDataT("4");
      }
    },
    tableData(val) {
      console.log(val);
      var _this = this;
      var newtableData = val;
      _this.filename = "事件分类统计明细-区域统计";
      _this.fileheadername =
        "事件分类统计明细-区域统计:" +
        _this.datevalue[0] +
        "至" +
        _this.datevalue[1];
      var arr = [];
      arr.push({
        district: "合计",
        next_district: "",
        new_event: _this.sumInfo.event1,
        ignore_event: _this.sumInfo.event1_0,
        submit_event: _this.sumInfo.event2,
        fenliu_event: _this.sumInfo.event3,
        acceptance_event: _this.sumInfo.event4,
        back_event: _this.sumInfo.event5,
        wei_fan_kui_event: _this.sumInfo.event6,
        completed_event: _this.sumInfo.event7,
        submit_percent:
          _this.sumInfo.event1 == 0
            ? "--"
            : (((_this.sumInfo.event2 / _this.sumInfo.event1) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : ((_this.sumInfo.event2 / _this.sumInfo.event1) * 100).toFixed(
                    0
                  )) + "%",
        flow_percent:
          _this.sumInfo.event2 == 0
            ? "--"
            : (((_this.sumInfo.event3 / _this.sumInfo.event2) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : ((_this.sumInfo.event3 / _this.sumInfo.event2) * 100).toFixed(
                    0
                  )) + "%",
        acceptance_percent:
          _this.sumInfo.event3 == 0
            ? "--"
            : (((_this.sumInfo.event4 / _this.sumInfo.event3) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : ((_this.sumInfo.event4 / _this.sumInfo.event3) * 100).toFixed(
                    0
                  )) + "%",
        back_percent:
          _this.sumInfo.event3 == 0
            ? "--"
            : (((_this.sumInfo.event5 / _this.sumInfo.event3) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : ((_this.sumInfo.event5 / _this.sumInfo.event3) * 100).toFixed(
                    0
                  )) + "%",
        overdue_percent:
          _this.sumInfo.event2 == 0
            ? "--"
            : (((_this.sumInfo.event6 / _this.sumInfo.event2) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : ((_this.sumInfo.event6 / _this.sumInfo.event2) * 100).toFixed(
                    0
                  )) + "%",
        completed_percent:
          _this.sumInfo.event4 == 0
            ? "--"
            : (((_this.sumInfo.event7 / _this.sumInfo.event4) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : ((_this.sumInfo.event7 / _this.sumInfo.event4) * 100).toFixed(
                    0
                  )) + "%",
      });
      newtableData.forEach((item, index) => {
        arr.push({
          district: item.district,
          next_district: "",
          new_event: _this.formatCount(item.towns, "event1"),
          ignore_event: _this.formatCount(item.towns, "event1_0"),
          submit_event: _this.formatCount(item.towns, "event2"),
          fenliu_event: _this.formatCount(item.towns, "event3"),
          acceptance_event: _this.formatCount(item.towns, "event4"),
          back_event: _this.formatCount(item.towns, "event5"),
          wei_fan_kui_event: _this.formatCount(item.towns, "event6"),
          completed_event: _this.formatCount(item.towns, "event7"),
          submit_percent:
            _this.formatCount(item.towns, "event1") == 0
              ? "--"
              : (
                  (_this.formatCount(item.towns, "event2") /
                    _this.formatCount(item.towns, "event1")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.towns, "event2") /
                    _this.formatCount(item.towns, "event1")) *
                  100
                ).toFixed(0) + "%",
          flow_percent:
            _this.formatCount(item.towns, "event2") == 0
              ? "--"
              : (
                  (_this.formatCount(item.towns, "event3") /
                    _this.formatCount(item.towns, "event2")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.towns, "event3") /
                    _this.formatCount(item.towns, "event2")) *
                  100
                ).toFixed(0) + "%",
          acceptance_percent:
            _this.formatCount(item.towns, "event3") == 0
              ? "--"
              : (
                  (_this.formatCount(item.towns, "event4") /
                    _this.formatCount(item.towns, "event3")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.towns, "event4") /
                    _this.formatCount(item.towns, "event3")) *
                  100
                ).toFixed(0) + "%",
          back_percent:
            _this.formatCount(item.towns, "event3") == 0
              ? "--"
              : (
                  (_this.formatCount(item.towns, "event5") /
                    _this.formatCount(item.towns, "event3")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.towns, "event5") /
                    _this.formatCount(item.towns, "event3")) *
                  100
                ).toFixed(0) + "%",
          overdue_percent:
            _this.formatCount(item.towns, "event2") == 0
              ? "--"
              : (
                  (_this.formatCount(item.towns, "event6") /
                    _this.formatCount(item.towns, "event2")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.towns, "event6") /
                    _this.formatCount(item.towns, "event2")) *
                  100
                ).toFixed(0) + "%",
          completed_percent:
            _this.formatCount(item.towns, "event4") == 0
              ? "--"
              : (
                  (_this.formatCount(item.towns, "event7") /
                    _this.formatCount(item.towns, "event4")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.towns, "event7") /
                    _this.formatCount(item.towns, "event4")) *
                  100
                ).toFixed(0) + "%",
        });
        item.towns.forEach((item2, index2) => {
          arr.push({
            district: "",
            next_district: item2.town,
            new_event: item2.new_event,
            ignore_event: item2.ignore_event,
            submit_event: item2.submit_event,
            fenliu_event: item2.fenliu_event,
            acceptance_event: item2.acceptance_event,
            back_event: item2.back_event,
            wei_fan_kui_event: item2.wei_fan_kui_event,
            completed_event: item2.completed_event,
            submit_percent:
              item2.new_event == 0
                ? "--"
                : (item2.submit_percent * 100).toFixed(0) + "%",
            flow_percent:
              item2.submit_event == 0
                ? "--"
                : ((item2.flow_percent || 0) * 100).toFixed(0) + "%",
            acceptance_percent:
              item2.fenliu_event == 0
                ? "--"
                : (item2.acceptance_percent * 100).toFixed(0) + "%",
            back_percent:
              item2.fenliu_event == 0
                ? "--"
                : (item2.back_percent * 100).toFixed(0) + "%",
            overdue_percent:
              item2.submit_event == 0
                ? "--"
                : (item2.overdue_percent * 100).toFixed(0) + "%",
            completed_percent:
              item2.acceptance_event == 0
                ? "--"
                : (item2.completed_percent * 100).toFixed(0) + "%",
          });
        });
      });
      _this.json_data = arr;
    },
    tableData_t(val) {
      var _this = this;
      var newtableData = val;
      _this.filename = "事件分类统计明细-分类统计";
      _this.fileheadername =
        "事件分类统计明细-分类统计:" +
        _this.datevalue_t[0] +
        "至" +
        _this.datevalue_t[1];
      var arr = [];
      arr.push({
        district: "合计",
        next_district: "",
        new_event: _this.sumInfoT.event_1,
        ignore_event: _this.sumInfoT.event_1_1,
        submit_event: _this.sumInfoT.event2,
        fenliu_event: _this.sumInfoT.event3,
        acceptance_event: _this.sumInfoT.event4,
        back_event: _this.sumInfoT.event5,
        wei_fan_kui_event: _this.sumInfoT.event6,
        completed_event: _this.sumInfoT.event_7,
        submit_percent:
          _this.sumInfoT.event_1 == 0
            ? "--"
            : (((_this.sumInfoT.event2 / _this.sumInfoT.event_1) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : (
                    (_this.sumInfoT.event2 / _this.sumInfoT.event_1) *
                    100
                  ).toFixed(0)) + "%",
        flow_percent:
          _this.sumInfoT.event2 == 0
            ? "--"
            : (((_this.sumInfoT.event3 / _this.sumInfoT.event2) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : (
                    (_this.sumInfoT.event3 / _this.sumInfoT.event2) *
                    100
                  ).toFixed(0)) + "%",
        acceptance_percent:
          _this.sumInfoT.event3 == 0
            ? "--"
            : (((_this.sumInfoT.event4 / _this.sumInfoT.event3) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : (
                    (_this.sumInfoT.event4 / _this.sumInfoT.event3) *
                    100
                  ).toFixed(0)) + "%",
        back_percent:
          _this.sumInfoT.event3 == 0
            ? "--"
            : (((_this.sumInfoT.event5 / _this.sumInfoT.event3) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : (
                    (_this.sumInfoT.event5 / _this.sumInfoT.event3) *
                    100
                  ).toFixed(0)) + "%",
        overdue_percent:
          _this.sumInfoT.event2 == 0
            ? "--"
            : (((_this.sumInfoT.event6 / _this.sumInfoT.event2) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : (
                    (_this.sumInfoT.event6 / _this.sumInfoT.event2) *
                    100
                  ).toFixed(0)) + "%",
        completed_percent:
          _this.sumInfoT.event4 == 0
            ? "--"
            : (((_this.sumInfoT.event_7 / _this.sumInfoT.event4) * 100).toFixed(
                0
              ) == "NaN"
                ? "0"
                : (
                    (_this.sumInfoT.event_7 / _this.sumInfoT.event4) *
                    100
                  ).toFixed(0)) + "%",
      });
      newtableData.forEach((item, index) => {
        arr.push({
          district: item.scene_type,
          next_district: "",
          new_event: _this.formatCount(item.scenes, "event_1"),
          ignore_event: _this.formatCount(item.scenes, "event_1_1"),
          submit_event: _this.formatCount(item.scenes, "event2"),
          fenliu_event: _this.formatCount(item.scenes, "event3"),
          acceptance_event: _this.formatCount(item.scenes, "event4"),
          back_event: _this.formatCount(item.scenes, "event5"),
          wei_fan_kui_event: _this.formatCount(item.scenes, "event6"),
          completed_event: _this.formatCount(item.scenes, "event_7"),
          submit_percent:
            _this.formatCount(item.scenes, "event_1") == 0
              ? "--"
              : (
                  (_this.formatCount(item.scenes, "event2") /
                    _this.formatCount(item.scenes, "event_1")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.scenes, "event2") /
                    _this.formatCount(item.scenes, "event_1")) *
                  100
                ).toFixed(0) + "%",
          flow_percent:
            _this.formatCount(item.scenes, "event2") == 0
              ? "--"
              : (
                  (_this.formatCount(item.scenes, "event3") /
                    _this.formatCount(item.scenes, "event2")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.scenes, "event3") /
                    _this.formatCount(item.scenes, "event2")) *
                  100
                ).toFixed(0) + "%",
          acceptance_percent:
            _this.formatCount(item.scenes, "event3") == 0
              ? "--"
              : (
                  (_this.formatCount(item.scenes, "event4") /
                    _this.formatCount(item.scenes, "event3")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.scenes, "event4") /
                    _this.formatCount(item.scenes, "event3")) *
                  100
                ).toFixed(0) + "%",
          back_percent:
            _this.formatCount(item.scenes, "event3") == 0
              ? "--"
              : (
                  (_this.formatCount(item.scenes, "event5") /
                    _this.formatCount(item.scenes, "event3")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.scenes, "event5") /
                    _this.formatCount(item.scenes, "event3")) *
                  100
                ).toFixed(0) + "%",
          overdue_percent:
            _this.formatCount(item.scenes, "event2") == 0
              ? "--"
              : (
                  (_this.formatCount(item.scenes, "event6") /
                    _this.formatCount(item.scenes, "event2")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.scenes, "event6") /
                    _this.formatCount(item.scenes, "event2")) *
                  100
                ).toFixed(0) + "%",
          completed_percent:
            _this.formatCount(item.scenes, "event4") == 0
              ? "--"
              : (
                  (_this.formatCount(item.scenes, "event_7") /
                    _this.formatCount(item.scenes, "event4")) *
                  100
                ).toFixed(0) == "NaN"
              ? "0"
              : (
                  (_this.formatCount(item.scenes, "event_7") /
                    _this.formatCount(item.scenes, "event4")) *
                  100
                ).toFixed(0) + "%",
        });
        item.scenes.forEach((item2, index2) => {
          arr.push({
            district: "",
            next_district: item2.type,
            new_event: item2.new_event,
            ignore_event: item2.ignore_event,
            submit_event: item2.submit_event,
            fenliu_event: item2.fenliu_event,
            acceptance_event: item2.acceptance_event,
            back_event: item2.back_event,
            wei_fan_kui_event: item2.wei_fan_kui_event,
            completed_event: item2.completed_event,
            submit_percent:
              item2.new_event == 0
                ? "--"
                : (item2.submit_percent * 100).toFixed(0) + "%",
            flow_percent:
              item2.submit_event == 0
                ? "--"
                : ((item2.flow_percent || 0) * 100).toFixed(0) + "%",
            acceptance_percent:
              item2.fenliu_event == 0
                ? "--"
                : (item2.acceptance_percent * 100).toFixed(0) + "%",
            back_percent:
              item2.fenliu_event == 0
                ? "--"
                : (item2.back_percent * 100).toFixed(0) + "%",
            overdue_percent:
              item2.submit_event == 0
                ? "--"
                : (item2.overdue_percent * 100).toFixed(0) + "%",
            completed_percent:
              item2.acceptance_event == 0
                ? "--"
                : (item2.completed_percent * 100).toFixed(0) + "%",
          });
        });
      });
      _this.json_dataT = arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.plan {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #d5d5d5;
  display: flex;
  flex-direction: column;
  .cunsustitle {
    height: 45px;
    line-height: 45px;
    font-size: 24px;
    font-weight: bolder;
  }
  .cunsus {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #2f334d;
    padding-left: 10px;
    border-radius: 4px;
    height: 100%;
    overflow: hidden;

    background: #1f244a;
    .navtitle {
      display: flex;
      font-size: 17px;
      font-weight: bolder;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #323654;
      > p {
        padding: 0 50px;
        margin: 0;
        cursor: pointer;
      }
      .querytitle {
        border-bottom: 5px solid #0582c7;
      }
    }
    .query_dayBox {
      display: flex;
      justify-content: space-between;
    }
    .query_day {
      padding-top: 10px;
      padding-bottom: 15px;
      display: flex;
      .query_datelist {
        display: flex;
        padding-top: 6px;

        > div {
          width: 80px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          color: #ffffff;
          background: #49628d;
          border-radius: 4px;
          margin-left: 25px;
          cursor: pointer;
        }
        .currentdatetype {
          background: #3b6fb8;
        }
      }
      .filter_area {
        border: 1px solid #3d4059;
        border-radius: 2px;
        padding-left: 10px;
        margin-right: 20px;
        label {
          display: inline-block;
        }
      }
    }
  }
}
.maskplan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000;
  background: rgba(0, 0, 0, 0.5);
  > div {
    top: 50%;
    margin-top: -25px;
    width: 100%;
    text-align: center;
    position: absolute;
    .el-icon-loading {
      color: #ffffff;
      animation: rotating 2s linear infinite;
    }
    .el-loading-text {
      color: #409eff;
      margin: 3px 0;
      font-size: 18px;
    }
  }
}
#filter_area ::v-deep {
  .el-select .el-input .el-input__inner {
    background: #1f244a;
    color: #ffffff;
    border: none;
    height: 36px;
    line-height: 36px;
    text-align: center;
  }
}
::v-deep {
  .el-select-dropdown {
    background: #1f244a;
    border: 1px solid #4c8fa5;
    .popper__arrow::after {
      border-bottom-color: #1f244a;
    }
  }
  .el-select-dropdown__wrap {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        color: #b6bac4;
      }
      .selected {
        color: #409eff;
      }
      .hover {
        background-color: #123d78;
      }
    }
  }
}
.tableList {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-right: 10px;
  .table_overflow {
    flex: 1;
    overflow: auto;
  }
  .table_title {
    display: flex;
    width: 100%;
    .modul {
      display: flex;
      flex: 1;
      margin-right: 8px;
      border-right: 1px solid #61647a;

      box-shadow: 4px 2px 11px 2px #020730;
      > div {
        border: 1px solid #61647a;
        border-right: none;
        line-height: 40px;
        text-indent: 10px;
        flex: 1;
      }
      .info_nest {
        min-width: 150px;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
      .info_nest_count {
        display: flex;
      }
    }
    .modul_three {
      width: 36%;
      flex: auto;
      > div {
        display: flex;
        > div {
          flex: 1;
          position: relative;
          height: 10px;
          background: #3b6176;
        }
        > p {
          margin: 0;
        }
      }
      .userpretime {
        flex: 0.5;
        min-width: 110px;
        max-width: 110px;
      }
    }
  }
  .count_title {
    display: flex;
    width: 100%;
    .modul {
      display: flex;
      flex: 1;
      margin-right: 8px;
      border-right: 1px solid #61647a;
      background: #0f1122;
      color: #6e9bfb;

      box-shadow: 4px 0px 11px 2px #020730;
      > div {
        border: 1px solid #61647a;
        border-right: none;
        line-height: 40px;
        text-indent: 10px;
        flex: 1;
        border-bottom: none;
      }
      .info_nest {
        min-width: 150px;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
      .info_nest_count {
        display: flex;
      }
    }
    .modul_three {
      width: 36%;
      flex: auto;
      > div {
        display: flex;
        > div {
          flex: 1;
          position: relative;
          height: 10px;

          margin-top: 15px;
          margin-left: 5px;
          border-radius: 5px;
          > p {
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
            height: 10px;
            border-radius: 5px;
          }
        }
        > span {
          display: inline-block;
          padding-right: 5px;
          text-indent: 10px;
          font-size: 13px;
          width: 50px;
        }
        .shangbao_box {
          background: #104d8c;
          > p {
            background: #409eff;
          }
        }
        .xietong_box {
          background: #825a1f;
          > p {
            background: #e6a23c;
          }
        }
        .shouji_box {
          background: #3b6176;
          > p {
            background: #5ad5e3;
          }
        }
        .tuihui_box {
          background: #6a5447;
          > p {
            background: #db604e;
          }
        }
        .yuqi_box {
          background: #6a3d70;
          > p {
            background: #a358a0;
          }
        }
        .banjie_box {
          background: #426c47;
          > p {
            background: #72c16a;
          }
        }
      }
      .userpretime {
        flex: 0.5;
        min-width: 110px;
        max-width: 110px;
      }
    }
  }

  .table_list {
    padding-bottom: 50px;
    > div:last-child {
      .havemoretitle {
        border-bottom: 1px solid #61647a;
      }
    }
  }
  .table_info {
    display: flex;

    .info_nest {
      min-width: 150px;
      max-width: 150px;
      border: 1px solid #61647a;
      border-right: none;
      border-bottom: none;
      text-indent: 10px;
      display: flex;
      i {
        padding-right: 10px;
        padding-top: 13px;
      }
    }

    .infobox {
      flex: 1;

      .info_data {
        flex: 1;
        display: flex;
        line-height: 40px;

        .havemoretitle {
          flex: 1;
          display: flex;
          justify-content: space-around;
          margin-right: 8px;
          border-right: 1px solid #61647a;
          background: #1f244a;
          > div {
            line-height: 40px;
            border: 1px solid #61647a;

            width: 100%;
            text-indent: 10px;
            border-right: none;
            border-bottom: none;
            margin: 0;
          }
          .info_nest {
            min-width: 150px;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
          }
          .info_nest_count {
            display: flex;
            justify-content: space-between;
          }
        }
        .modul_three {
          width: 36%;
          flex: auto;
          > div {
            display: flex;
            > div {
              flex: 1;
              position: relative;
              height: 10px;

              margin-top: 15px;
              margin-left: 5px;
              border-radius: 5px;
              > p {
                margin: 0;
                position: absolute;
                top: 0;
                left: 0;
                height: 10px;
                border-radius: 5px;
              }
            }
            > span {
              display: inline-block;
              padding-right: 5px;
              text-indent: 10px;
              font-size: 13px;
              width: 50px;
            }
            .shangbao_box {
              background: #104d8c;

              > p {
                background: #409eff;
              }
            }
            .xietong_box {
              background: #825a1f;
              > p {
                background: #e6a23c;
              }
            }
            .shouji_box {
              background: #3b6176;
              > p {
                background: #5ad5e3;
              }
            }
            .tuihui_box {
              background: #6a5447;
              > p {
                background: #db604e;
              }
            }
            .yuqi_box {
              background: #6a3d70;
              > p {
                background: #a358a0;
              }
            }
            .banjie_box {
              background: #426c47;
              > p {
                background: #72c16a;
              }
            }
          }
          .userpretime {
            flex: 0.5;
            min-width: 110px;
            max-width: 110px;
          }
        }
      }
      .info_data_list {
        .info_areaname {
          text-indent: 20px !important;
        }
      }
      .info_data_list .havemoretitle {
        background: #363a5c;
      }

      .isShowAll {
        height: 0;
        visibility: hidden;
      }
    }
  }
}
.info_data_list .havemoretitle:hover {
  background: #00062f !important;
}
.mydatepicker.el-input__inner {
  width: 300px;
  background: rgba(31, 36, 74, 0.95);
  color: #aeaeae;
  height: vh(32);
  line-height: vh(32);
  padding: 0 8px;
  border: 1px solid #3d4059;
  cursor: pointer;

  ::v-deep .el-range-input {
    color: #aeaeae;
    background: rgba(255, 255, 255, 0);
  }
  ::v-deep .el-range__icon {
    line-height: vh(32);
  }
  ::v-deep .el-range-separator {
    color: #c3c3c3 !important;
    line-height: vh(32);
  }
}
.export-excel-wrapper {
  cursor: pointer;
  border: 2px solid #49628d;
  padding: 5px 10px;
  border-radius: 4px;
  margin: 14px 10px 0 0;
}
.tableList::-webkit-scrollbar {
  width: 7px;
  height: 10px;
  background-color: rgba(92, 90, 90, 0.7);
}
.tableList::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(42, 42, 44, 0.3);
  border-radius: 10px;
  background-color: rgba(236, 238, 241, 0.5);
}
.tableList::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(15, 15, 15, 0.2);
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
